Quick Guide to... HTML Tables

The previous writer of these parts has decided to give up. More for me to do... hmmmm.... aren't I lucky... Anyway, someone suggested HTML tables as a topic for this, and since I've just got the hang of legal HTML tables (as opposed to illegal ones) myself, I think I may aswell give you the benefit of my new-found experience.

Tables in HTML start off with a TABLE tag. Easy. There are several arguments you can give in this tag...

WIDTH=
This is the width of the table overall. You can specify this in percent or pixels. eg, WIDTH=90% or WIDTH=150

HEIGHT=
This is the height of the table. Specify using the same syntax as WIDTH

BORDER=
The width of the table border in pixels. eg, BORDER=0

CELLPADDING=
The size of the padding around a cell, in pixels.

CELLSPACING=
The space between a cell of the table.

So, that's the table started off. If you're going to be using width definitions in the cells, then you need to define a width of the overall table of things may start to look strange.

For your table to be legal, you need to start off the first row of cells. You do this using the <TR> (Table Row) tag. This includes some parameters. WIDTH and HEIGHT can be used. Others are available, but can be covered later if anyone asks.

<TABLE WIDTH=500 HEIGHT=500 BORDER=0> <TR>

That's what you have so far. Notice I've started indenting the code. This is just for ease of reading, and is not compulsary. You now need to define a cell. You do this using the <TD> tag. This allows the width and height parameters, as well as these:

COLSPAN=
This is the number of columns that the cell you are creating will span across the top of.

 +------------+---+
   |     1      | 2 |
   +---+----+---+---+
   | 3 | 4  | 5 | 6 |
   +---+----+---+---+

Cell number 1 spans 3 columns (goes over the top of 3 columns that is). The HTML code for the above table would look something like this:

<TABLE BORDER=0> Start the table
<TR> Start the first row
<TD COLSPAN=3> Start the first cell
This is cell 1
</TD> End the first cell
<TD COLSPAN=1> Start the second cell
This is cell 2
</TD> End the second cell
</TR> End the first row
<TR> Start the second row
<TD COLSPAN=1> Start of third cell
This is cell 3
</TD> End of third cell
<TD COLSPAN=1> Start of fourth cell
This is cell 4 </TD> End of fourth cell
<TD COLSPAN=1> Start of fifth cell
This is cell 5
</TD> End of fifth cell
<TD COLSPAN=1> Start of sixth cell
This is cell 6
</TD> End of sixth cell
</TR> End of second row
</TABLE> End of table


Actual table results
This is cell 1 This is cell 2
This is cell 3 This is cell 4 This is cell 5 This is cell 6

You can also have a BGCOLOR argument in the TD tag which allows you to specify a colour for the cell using either normal HTML colour definitions such as 'Black', 'Green', etc or Hex values such as '#00ff00'. Just remember to close all your tags and it's legal! (Well nearly

WOA text logo